<template>
	<div class="heatBox">
		<div class="heatBoxLeft">
			<span class="time">{{detailInfo.publishTime}}</span>
			<span class="ly">来源：</span>
			<span class="zz">作者：</span>
			<span class="bfl">{{type=='video'?'播放量：':'浏览量：'}}{{setNumber(detailInfo.views)}}</span>
		</div>
		<div class="heatBoxRight">
						<!-- <span class="zan">+1</span> -->
			<span class="sjBox" @click="zanClick" :class="isUp?'borRed':''" @click="actions(1)">
				<span class="iconfont icon-Thumbs-up"></span>
				<span class="sj zan">赞</span>
			</span>
			<span class="sjBox" @click="plClick">
				<span class="iconfont icon-Comment"></span>
				<span class="sj">{{total}}</span>
			</span>
			<span class="sjBox" :class="isFavorite?'borRed':''" @click="actions(3)">
				<span class="iconfont icon-Star"></span>
				<span class="sj">{{isFavorite?'已收藏':'收藏'}}</span>
			</span>
			<el-popover placement="top-start" popper-style="background: #FFFFFF;">
				<template #reference>
					<span class="sjBox">
						<span class="iconfont icon-Share-two"></span>
						<span class="sj">分享</span>
					</span>
				</template>
				<template #default>
					<share></share>
				</template>
			</el-popover>
		</div>
		
	</div>

</template>

<script>
	import { defineAsyncComponent } from 'vue';	
	export default {
		props: ['type', 
		'detailInfo', 'getNewTotalComments'],
    components: {
    	share:defineAsyncComponent(() => import(rootPath+'/src/components/footer/share.vue')),
    },
		data() {
			return {
				query: GetQueryString(),
				src: '../img/pic3.jpg',
				src1: '../img/pic1.jpg',
				src4: '../img/pic4.jpg',
				ztype: false,
				sctype: false,
				isUp: '', // 查看是否点赞；
				isFavorite:'',
				total:0,
			}
		},
		watch:{
			getNewTotalComments(newVal){
				this.total = newVal;
			}
		},
		mounted(){
			this.getContentComments();
		},
		methods: {
			setNumber(val) {
				return SetNumber(val);
			},
			plClick() {
				this.$emit('comment')
			},
		
			getIsUp() {
				let param = {
					id: this.query.id
				};
				contentApi.getIsUp(param, res => {
					if (res.code == '00000 00000') {
						this.isUp = res.data;
					} else {
					}
				});
			},
			actions(index) {
				if (index == 1) {
					contentApi[this.isUp ? 'contentUnLikes' : 'contentLikes']({ id: this.query.id }, res => {
						if (res.code == '00000 00000') {
							this.isUp = !this.isUp;
							//this.$message(res.message);
						}
					});
				} else if (index == 3) {
					contentApi[this.isFavorite ? 'removeFavorite' : 'addFavorite']({ id: this.query.id }, res => {
						if (res.code == '00000 00000') {
							this.isFavorite = !this.isFavorite;
							//this.$message(res.message);
						}
					});
				}
			},
			getContentComments() {// 获取内容评论
				let param = {
					contentId: this.query.id,
					pageNumber:  1,
					pageSize: 1
				};
				contentApi.contentCommentList(param, res => {
					if (res.code == '00000 00000') {
						
						this.total = res.data.total;
					} else {
					}
				});
			},

		}
	}
</script>

<style scoped="scoped">
.heatBox {
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.heatBox .heatBoxLeft .time,
.heatBox .heatBoxLeft .ly,
.heatBox .heatBoxLeft .zz,
.heatBox .heatBoxLeft .bfl {
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}
.heatBox .heatBoxLeft .ly,
.heatBox .heatBoxLeft .zz,
.heatBox .heatBoxLeft .bfl {
  margin-left: 40px;
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}
.heatBox .heatBoxRight {
  width: 334px;
  display: flex;
  justify-content: end;
}
.heatBox .heatBoxRight .sjBox {
  margin-left: 24px;
  cursor: pointer;
}
.heatBox .heatBoxRight .iconfont {
  font-size: 16px;
  margin-right: 8px;
  padding: 4px;
  border-radius: 50%;
  color: #E8E8E8;
  background: rgba(248,248,248,0.1);
}
.heatBox .heatBoxRight .sj {
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #E8E8E8;
  line-height: 14px;
}
.heatBox .heatBoxRight .zan {
  display: inline-block;
  width: 14px;
}
.heatBox .heatBoxRight .borRed .iconfont,
.heatBox .heatBoxRight .borRed .sj {
  color: #FF3333 !important;
}
.heatBox .heatBoxRight .borRed .sj {
  display: inline-block;
}


</style>